<template>
	<section>
		<main class="bgpurple pb50">
			<mt-header fixed title="新手任务">
				<mt-button slot="left" icon="back"  @click="goBack">
					<a class="white" href="javascript:;">返回</a>
				</mt-button>
			</mt-header>
			<div class="mt40">
				<h2 class="lh50 fs35 white pt20">新手专享福利</h2>
				<h3 class="bgorange white">完成任务 · 领取现金红包</h3>
				<div style="margin-top: -80px">
					<img :src="newtaskImgBanner" width="100%" alt="">
				</div>
				<ul>
					<li class="pr bgwhite ml10 mr10">
						<div class="tag bgpurple1 white">
							<span class="lh25 fs14">任务一</span>
						</div>
						<div class="clearfix">
							<strong class="fl mr10">
								<img :src="newtaskImg1" width="80" height="80" alt="">
							</strong>
							<h4 class="lh30 tl fs16">新手注册</h4>
							<p class="lh20 tl fontc3">赠送操盘模拟金</p>
							<p class="lh20 tl fontc3">模拟操盘金可用于【模拟交易】</p>
						</div>

						<em class="btn lh30 bggray fs14 white">已领取</em>

					</li>

					<li class="pr bgwhite ml10 mr10 mt50">
						<div class="tag bgpurple1 white">
							<span class="lh25 fs14">任务二</span>
						</div>
						<div class="clearfix">
							<strong class="fl mr10">
								<img :src="newtaskImg2" width="80" height="80" alt="">
							</strong>
							<h4 class="lh30 tl fs16">{{task[0].missionName}}</h4>
							<p class="lh20 tl fontc3">领取<span class="red">{{task[0].money}}</span>元现金奖励！</p>
							<p class="lh20 tl fontc3">先模拟，再交易！风险低，收益高！</p>
						</div>

						<em class="btn lh30 bgorange fs14 white" v-show="task[0].status==0">
							<router-link to="/">
								<span class="white">去交易</span>
							</router-link>
						</em>
						<em class="btn lh30 bgorange fs14 white" @click="getMoney(task[0])" v-show="task[0].status==1">领取</em>
						<em class="btn lh30 bggray fs14 white" v-show="task[0].status==2">已领取</em>

					</li>

					<li class="pr bgwhite ml10 mr10 mt50">
						<div class="tag bgpurple1 white">
							<span class="lh25 fs14">任务三</span>
						</div>
						<div class="clearfix">
							<strong class="fl mr10">
								<img :src="newtaskImg3" width="80" height="80" alt="">
							</strong>
							<h4 class="lh30 tl fs16">{{task[1].missionName}}</h4>
							<p class="lh20 tl fontc3">领取<span class="red">{{task[1].money}}</span>元现金奖励！</p>
							<p class="lh20 tl fontc3">实名+绑定银行卡后就有现金奖励！</p>
						</div>

						<em class="btn lh30 bgorange fs14 white" v-show="task[1].status==0">
							<router-link to="/account/bindBank">
								<span class="white">去实名</span>
							</router-link>
						</em>
						<em class="btn lh30 bgorange fs14 white" @click="getMoney(task[1])" v-show="task[1].status==1">领取</em>
						<em class="btn lh30 bggray fs14 white" v-show="task[1].status==2">已领取</em>

					</li>

					<li class="pr bgwhite ml10 mr10 mt50">
						<div class="tag bgpurple1 white">
							<span class="lh25 fs14">任务四</span>
						</div>
						<div class="clearfix">
							<strong class="fl mr10">
								<img :src="newtaskImg4" width="80" height="80" alt="">
							</strong>
							<h4 class="lh30 tl fs16">{{task[2].missionName}}</h4>
							<p class="lh20 tl fontc3">领取<span class="red">{{task[2].money}}</span>元现金奖励！</p>
							<p class="lh20 tl fontc3">银联／支付宝充值，安全有保障！</p>
						</div>

						<em class="btn lh30 bgorange fs14 white" v-show="task[2].status==0">
							<a href="/account/paySelect.html"><span class="white">去充值</span></a>
						</em>
						<em class="btn lh30 bgorange fs14 white" @click="getMoney(task[2])" v-show="task[2].status==1">领取</em>
						<em class="btn lh30 bggray fs14 white" v-show="task[2].status==2">已领取</em>

					</li>

					<li class="pr bgwhite ml10 mr10 mt50">
						<div class="tag bgpurple1 white">
							<span class="lh25 fs14">任务五</span>
						</div>
						<div class="clearfix">
							<strong class="fl mr10">
								<img :src="newtaskImg5" width="80" height="80" alt="">
							</strong>
							<h4 class="lh30 tl fs16">{{task[3].missionName}}</h4>
							<p class="lh20 tl fontc3">领取<span class="red">{{task[3].money}}</span>元现金奖励！</p>
							<p class="lh20 tl fontc3">买涨买跌都能赚，轻松月入过万！</p>
						</div>

						<em class="btn lh30 bgorange fs14 white" v-show="task[3].status==0">
							<router-link to="/">
								<span class="white">去交易</span>
							</router-link>
						</em>
						<em class="btn lh30 bgorange fs14 white" @click="getMoney(task[3])" v-show="task[3].status==1">领取</em>
						<em class="btn lh30 bggray fs14 white" v-show="task[3].status==2">已领取</em>

					</li>
				</ul>
				<section class="tip bgwhite ml10 mr10 mt30 pb10">
					<h5 class="tag bgpurple1">
						<span class="white fs14">活动说明</span>
					</h5>

					<p class="lh25 tl mt10"><span class="bgpurple">1</span>领取的现金奖励均在领取后在【我的】-账户余额查看。</p>
					<p class="lh25 tl"><span class="bgpurple">2</span>所赠送的现金，未经实盘交易（限外盘，小恒指除外）不可提现。</p>
					<p class="lh25 tl"><span class="bgpurple">3</span>本活动最终解释权归平台所有。</p>

				</section>
			</div>
		</main>
	</section>
</template>
<script>

import {MessageBox,Toast,Indicator} from 'mint-ui'
import axios   from 'axios'

export default {
	name: "Newtask",
	data () {
		return {
			newtaskImgBanner: "/static/imgs/newtask-banner.png",
			newtaskImg1: "/static/imgs/newtask1.svg",
			newtaskImg2: "/static/imgs/newtask2.svg",
			newtaskImg3: "/static/imgs/newtask3.svg",
			newtaskImg4: "/static/imgs/newtask4.svg",
			newtaskImg5: "/static/imgs/newtask5.svg",
			task : [{},{},{},{}],
		}
	},
	created () {
		this.getNewtask();
	},
	methods : {
		getNewtask () {
			Indicator.open();
			axios({
				methods: "post",
				url: '/user/mission/findUserMission.do',
				params: {

				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				if (res.code == 200) {
					this.task = res.data;
				} else if (res.code == 503) {
					this.$router.push({
						path: "/login"
					})
				} else {
					Toast(res.msg);
				}
			})
		},
		getMoney (obj) {
			Indicator.open();
			console.log(obj);
			axios({
				methods: "post",
				url: '/user/mission/updateUserMission.do',
				params: {
					missionId: obj.missionId,
			        status: obj.status,
			        money: obj.money,
				}
			})
			.then((res) => {
				Indicator.close();
				res = res.data;
				if (res.code == 200) {
					this.getNewtask();
					Toast(res.msg);
				} else if (res.code == 503) {
					this.$router.push({
						path: "/login"
					})
				} else {
					Toast(res.msg);
				}
			})
		},
		goBack () {
			window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
		}
	}
}
</script>

<style scoped>
	.bgpurple{
		background-color: #7743FB;
	}
	.bgpurple1{
		background-color: #6A71FF;
	}
	.bgorange{
		background-color: #F45245;
	}
	div h3{
		font-size: 15px;
		width: 2.2rem;
		margin: 0 auto;
		border-radius: 18px;
		line-height: 36px;
	}
	ul li{
		padding: 10px;
		border-radius: 5px;
	}
	ul li .tag{
		position: absolute;
		top: -30px;
		left: 20px;
		width: 70px;
		height: 30px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	ul li .tag span{
		display: block;
		border: 1px dotted #fff;
		border-bottom: 0 none;
		margin-top: 5px;
		margin-left: 5px;
		margin-right: 5px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	ul li em strong img{
	
	}
	ul li em {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		border-radius: 2px;
	}
	.tip{
		border-radius: 5px;
	}
	.tip .tag{
		width: 1rem;
		margin: 0 auto;
		height: 30px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	.tip .tag span{
		height: 25px;
		border: 1px dotted #fff;
		display: block;
		border-top: 0 none;
		line-height: 25px;
		margin-left: 5px;
		margin-right: 5px;
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	.tip p{
		margin-left: 10px;
	}
	.tip p span {
		width: 20px;
		height: 20px;
		color: #fff;
		border-radius: 50%;
		float: left;
		text-align: center;
		margin-top: 2px;
		line-height: 20px;
		margin-right: 5px;
	}
</style>





